<template>
  <view>
    <!-- 悬浮按钮 -->
    <view class="float-btn" @click="togglePopup">
      <image
        v-if="showInstruction"
        class="icon"
        src="/static/image/shiyongshuoming.png"
        mode="aspectFit"
      ></image>
    </view>
    <!-- 弹窗遮罩层 -->
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        class="uni-popup-dialog-height"
        type="info"
        mode="base"
        :title="instructions.menuXcxName"
        :content="
          instructions.usageInstructions ||
          '此功能模块展示' + instructions.menuXcxName
        "
        confirmText="关闭"
        :showClose="false"
        :showConfirm="false"
        :before-close="true"
        @close="$refs.inputDialog.close()"
        @confirm="$refs.inputDialog.close()"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { getInstructions } from '@/api/index';
export default {
  props: {
    name: {
      type: String,
      require: true,
    },
    showInstruction: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showPopup: false,
      instructions: {},
    };
  },
  created() {
    getInstructions(this.name).then((res) => {
      this.instructions = res.data;
      // 动态设置标题
      this.instructions &&
        this.instructions.menuXcxName &&
        uni.setNavigationBarTitle({
          title: this.instructions.menuXcxName,
        });
    });
  },
  methods: {
    togglePopup() {
      this.showPopup = !this.showPopup;
      if (this.showPopup) {
        this.$refs.inputDialog.open();
      } else {
        this.$refs.inputDialog.close();
      }
    },
  },
};
</script>

<style>
.float-btn {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 1000;
}
.icon {
  width: 50px;
  height: 50px;
}
.popup-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
}
.uni-popup-dialog-height {
  max-height: 70vh;
  overflow-y: auto;
}
</style>
